<template>
  <jke-modal
    :visible.sync="jkeForm.visible"
    :width="1200"
    :title="jkeForm.title"
    :fullscreen.sync="jkeForm.fullscreen"
    :switchFullscreen="jkeForm.switchFullscreen"
  >
    <!--  -->
    <crumbs @goBack="goBack" :superiorMenu="['销售管理', '销售合同']" currentMenu="订单详情"> </crumbs>
    <div class="page-scroll-wrap">
      <div class="uni-card" id="navbar">
        <!-- <div class="bd-line"></div> -->
        <div class="item-wrap">
          <div class="detail-item">
            <p class="subtitle">订单编号</p>
            <p class="secondary-text">{{ detailInfo.orderCode || '-' }}</p>
          </div>
          <div class="detail-item">
            <p class="subtitle">所属客户</p>
            <p class="secondary-text">{{ detailInfo.customName || '-' }}</p>
          </div>
          <div class="detail-item">
            <p class="subtitle">交货日期</p>
            <p class="secondary-text">{{ detailInfo.deliveryDate ? moment(detailInfo.deliveryDate).format('YYYY年MM月DD日') : '-' }}</p>
          </div>

          <div :class="headerFixed == true ? 'fixed-tab' : ''" id="fixedHeaderRoot" style="width: 100%">
            <a-tabs
              :activeKey="activeKey"
              @change="callback"
              style="width: 100%; margin-top: 24px; margin-bottom: -40px; margin-left: -16px"
            >
              <a-tab-pane key="1" tab="物品明细" />
              <a-tab-pane key="2" tab="自定义信息" />
              <a-tab-pane key="3" tab="生产工单" />
            </a-tabs>
          </div>
        </div>
      </div>
      <div class="cards-box" :style="{ marginTop: headerFixed == true ? '57px' : '' }">
        <!-- 物品明细---------------- begin ---------------- -->
        <div v-if="activeKey == 1">
          <div class="table-wrap">
            <a-table
              row-key="id"
              size="middle"
              :scroll="{ x: '100%' }"
              :hideDefaultSelections="false"
              :loading="goodsDetail.loading"
              :columns="goodsColumns"
              :dataSource="goodsDetail.dataSource"
              :pagination="false"
            >
            </a-table>
            <!-- 全选/分页 -->

            <div style="display: flex; margin: 20px 0; justify-content: space-between; align-items: center">
              <div class="check-contain">
                <span>
                  {{ `共 ${goodsDetail.totleList.length} 条` }}
                </span>
              </div>
              <div>
                <a-pagination
                  :total="goodsDetail.totleList.length"
                  v-model="goodsDetail.current"
                  :page-size-options="goodsDetail.pageSizeOptions"
                  :page-size="goodsDetail.pageSize"
                  @change="onChangegoodsDetail"
                  @showSizeChange="onChangegoodsDetail"
                  show-quick-jumper
                  show-size-changer
                />
              </div>
            </div>
          </div>

          <div style="padding: 12px">
            <Examine v-if="detailInfo.flowInstId" type="2" :id="detailInfo.flowInstId" ref="examine" />
          </div>
        </div>
        <!-- 物品明细---------------- end ---------------- -->

        <!-- 自定义信息---------------- begin ---------------- -->
        <div v-if="activeKey == 2" class="tab-wrap">
          <div class="uni-card">
            <div class="item-wrap" v-if='formTypeExtendedFields.length'>
              <div class="detail-item" style="width: 33%" v-for="(item, index) in formTypeExtendedFields" :key="index">
                <p class="subtitle">{{ item.fieldName }}</p>
                <p class="secondary-text">{{ detailInfo.extDataJson[item.fieldKey] || '-' }}</p>
              </div>
              <div
                class="detail-item"
                style="width: 33%"
                v-for="(item, index) in formTypeExtendedFields.length % 3"
                :key="index"
              ></div>
            </div>
            <div v-else>
              暂无数据
            </div>

          </div>
        </div>
        <!-- 自定义信息---------------- end ---------------- -->

        <!-- 生产工单---------------- begin ---------------- -->
        <div v-if="activeKey == 3">
          <div class="table-wrap">
            <a-table
              row-key="id"
              size="middle"
              :scroll="{ x: computedX }"
              :hideDefaultSelections="false"
              :loading="orderPage.loading"
              :columns="columns"
              :dataSource="orderPage.dataSource"
              :pagination="false"
              @change="handleChange"
            >
              <span slot="orderStatusText" slot-scope="text, record">
                <span :style="{ color: getStatusColor(record.orderStatus) }">{{ record.orderStatusText || '-' }}</span>
              </span>
              <!-- 输入框 -->
              <div slot="searchDropdown" slot-scope="{ column }" class="searchWorkOreder">
                <a-input
                  placeholder="请输入"
                  v-model="orderFilterForm[column.dataIndex]"
                  style="width: 188px; display: block"
                  @pressEnter="filterOrderData"
                />
                <a-button type="primary" style="width: 80px; margin-left: 20px; display: block" @click="getOrderList">
                  搜索
                </a-button>
              </div>
              <a-icon
                slot="searchIcon"
                slot-scope="filtered"
                type="search"
                :style="{ color: filtered ? '#108ee9' : undefined }"
              />

              <!-- 选择搜索 -->
              <div slot="selectDropdown" slot-scope="{ confirm, clearFilters, column }" class="searchWorkOreder">
                <a-select
                  mode="multiple"
                  placeholder="请选择"
                  allowClear
                  style="width: 188px"
                  v-model="orderFilterForm[column.dataIndex]"
                >
                  <a-select-option value="1">未开始</a-select-option>
                  <a-select-option value="2">生产中</a-select-option>
                  <a-select-option value="3">已完成</a-select-option>
                  <a-select-option value="3">已取消</a-select-option>
                </a-select>
                <a-button type="primary" style="width: 80px; margin-left: 20px; display: block" @click="getOrderList">
                  搜索
                </a-button>
              </div>
              <a-icon
                slot="selectIcon"
                slot-scope="filtered"
                type="filter"
                :style="{ color: filtered ? '#108ee9' : undefined }"
              />
              <!-- 人员选择 -->
              <div slot="selectPeople" slot-scope="{ confirm, clearFilters, column }" class="searchWorkOreder">
                <j-select-user-by-dep
                  @changeRow="createChange"
                  v-model="orderFilterForm.createBys"
                  :seldep="true"
                  :modalWidth="1000"
                  :limit="5"
                  :multi="true"
                  v-if="column.dataIndex == 'createByText'"
                ></j-select-user-by-dep>
                <j-select-user-by-dep
                  @changeRow="updateChange"
                  v-model="orderFilterForm.updateBys"
                  :seldep="true"
                  :modalWidth="1000"
                  :limit="5"
                  :multi="true"
                  v-else
                ></j-select-user-by-dep>
                <a-button type="primary" style="width: 80px; margin-left: 20px; display: block" @click="getOrderList">
                  搜索
                </a-button>
              </div>
              <a-icon
                slot="peopleIcon"
                slot-scope="filtered"
                type="filter"
                :style="{ color: filtered ? '#108ee9' : undefined }"
              />
              <div
                slot="orderCode"
                @click="openDetail(record)"
                slot-scope="text, record"
                class="btn-text"
                :title="text"
              >
                {{ text }}
              </div>
              <div
                class="ant-table-row-cell-ellipsis"
                slot="num"
                :title="`${numFormat(record.num)}`"
                slot-scope="text, record"
              >
                {{ `${numFormat(record.num)}` }}
              </div>
              <!-- 生产进度 -->
              <div style="display: flex;" slot="productionProcess" slot-scope="text, record">
                <div v-for="(item, index) in record.produceOrderTaskVo" :key="index">
                  <div style="display: flex;flex-direction: column;align-items: center;margin: 0px 10px;">
                      <a-progress
                        type="circle"
                        :percent="100"
                        :format="(_)=>progressFormat(_,item.qualifiedNum, item.planProduceNum)"
                        :strokeWidth="6"
                        :showInfo="true"
                        :width="40"
                        status="normal"
                        :strokeColor="checkStatus((item.qualifiedNum / item.planProduceNum) * 100)"
                      />
                      <span>{{ item.processesName || '-' }}</span>
                  </div>
                </div>
              </div>
              <!-- 计划开始时间 -->
              <span
                slot="planStartTime"
                :title="text ? moment(text).format('YYYY-MM-DD HH:mm') : '-'"
                slot-scope="text, record"
                >{{ record.planStartTime ? moment(record.planStartTime).format('YYYY-MM-DD HH:mm') : '-' }}</span
              >
              <!-- 计划完成时间 -->
              <span
                slot="planEndTime"
                :title="text ? moment(text).format('YYYY-MM-DD HH:mm') : '-'"
                slot-scope="text, record"
                :style="{ color: checkColor(record) }"
                >{{ record.planEndTime ? moment(record.planEndTime).format('YYYY-MM-DD HH:mm') : '-' }}</span
              >
              <div
                class="ant-table-row-cell-ellipsis"
                slot="producedNum"
                :title="`${numFormat(record.producedNum)}`"
                slot-scope="text, record"
              >
                {{ `${numFormat(record.producedNum)}` }}
              </div>
              <div slot="orderStatus" slot-scope="text, record" :title="text">
                <span
                  v-if="record.orderStatus == 'notStarted'"
                  style="color: #ff943e"
                  :title="record.orderStatus || '-'"
                  >{{ record.orderStatus || '-' }}</span
                >
                <span
                  v-if="record.orderStatus == 'inProduction'"
                  style="color: #1890ff"
                  :title="record.orderStatus || '-'"
                  >{{ record.orderStatus || '-' }}</span
                >
                <span
                  v-if="record.orderStatus == 'completed'"
                  style="color: #00b042"
                  :title="record.orderStatus || '-'"
                  >{{ record.orderStatus || '-' }}</span
                >
                <span
                  v-if="record.orderStatus == 'abolished'"
                  style="color: #888888"
                  :title="record.orderStatus || '-'"
                  >{{ record.orderStatus || '-' }}</span
                >
              </div>
            </a-table>
            <!-- 全选/分页 -->
            <div style="display: flex; margin: 20px 0; justify-content: space-between; align-items: center">
              <div class="check-contain">
                <span>
                  {{ `共 ${orderPage.total} 条` }}
                </span>
              </div>
              <div>
                <a-pagination
                  :total="orderPage.total"
                  v-model="orderPage.current"
                  :page-size-options="orderPage.pageSizeOptions"
                  :page-size="orderPage.pageSize"
                  @change="onChangeOrderPage"
                  @showSizeChange="onChangeOrderPage"
                  show-quick-jumper
                  show-size-changer
                />
              </div>
            </div>
          </div>

          <div style="padding: 12px">
            <Examine
              ids="ERP_SALE_CONTRACT"
              v-if="detailInfo.flowInstId"
              type="2"
              :id="detailInfo.flowInstId"
              ref="examine"
            />
          </div>
        </div>
        <!-- 生产工单---------------- end ---------------- -->
      </div>
      <applyDeliver ref="applyDeliver"></applyDeliver>
      <workOrderDetail ref="workOrderDetail"></workOrderDetail>
    </div>
  </jke-modal>
</template>
<script>
import crumbs from '@/components/crumbs.vue'
import FileDetail from '@/components/fileActions/FileDetail'
import FlowStatus from '@/pubComponent/FlowStatus'
import Examine from '@/components/examine'
import { API } from '@/api/requestFzs'
import { fourFloatNum, numFormat, subStrText } from '@/utils/util'
import ImagePreview from '@/components/fileActions/ImagePreview'
import { camelCase2UnderLine } from '@/utils/util'
import { APILX } from '@/api/requestLx'
import tableDynamicField from '@/mixins/tableDynamicField'
import workOrderDetail from '@/views/workManagement/workOrder/workOrderDetail'
import moment from 'moment'
//@param condition 过滤条件
//@param data 需要过滤的数据
let filterTableData = (condition, data) => {
  return data.filter((item) => {
    return Object.keys(condition).every((key) => {
      return String(item[key]).toLowerCase().includes(String(condition[key]).trim().toLowerCase())
    })
  })
}
export default {
  mixins: [tableDynamicField],
  data() {
    const allColumn = [
      {
        title: '工单编号',
        width: 180,
        ellipsis: true,
        dataIndex: 'orderCode',
        scopedSlots: {
          filterDropdown: 'searchDropdown',
          filterIcon: 'searchIcon',
          customRender: 'orderCode',
        },
      },
      {
        title: '物品编号',
        width: 180,
        ellipsis: true,
        dataIndex: 'serialNumber',
        scopedSlots: {
          filterDropdown: 'searchDropdown',
          filterIcon: 'searchIcon',
          customRender: 'serialNumber',
        },
      },
      {
        title: '物品名称',
        width: 180,
        ellipsis: true,
        dataIndex: 'serialName',
        scopedSlots: {
          filterDropdown: 'searchDropdown',
          filterIcon: 'searchIcon',
          customRender: 'serialName',
        },
      },
      {
        title: '规格',
        dataIndex: 'serialSpecifications',
        width: 180,
        ellipsis: true,
        scopedSlots: {
          filterDropdown: 'searchDropdown',
          filterIcon: 'searchIcon',
          customRender: 'serialSpecifications',
        },
      },
      {
        title: '状态',
        dataIndex: 'orderStatusText',
        ellipsis: true,
        width: 180,
        scopedSlots: {
          // filterDropdown: 'selectDropdown',
          // filterIcon: 'selectIcon',
          customRender: 'orderStatusText',
        },
      },
      {
        title: '生产进度',
        dataIndex: 'productionProcess',
        ellipsis: true,
        width: 400,
        scopedSlots: {
          customRender: 'productionProcess',
        },
      },
      {
        title: '单位',
        dataIndex: 'unitName',
        ellipsis: true,
        width: 180,
        scopedSlots: {
          customRender: 'unitName',
        },
      },
      {
        title: '计划生产数量',
        width: 180,
        dataIndex: 'planProduceNum',
        scopedSlots: {
          customRender: 'planProduceNum',
        },
      },
      {
        title: '计划开始时间',
        width: 180,
        dataIndex: 'planStartTime',
        scopedSlots: {
          customRender: 'planStartTime',
        },
      },
      {
        title: '计划完成时间',
        width: 180,
        dataIndex: 'planEndTime',
        scopedSlots: {
          customRender: 'planEndTime',
        },
      },
      {
        title: '已生产数量',
        width: 180,
        dataIndex: 'qualifiedNumEnd',
        scopedSlots: {
          customRender: 'qualifiedNumEnd',
        },
      },
      {
        title: '创建时间',
        width: 180,
        dataIndex: 'createTime',
        sorter: true,
        scopedSlots: {
          customRender: 'createTime',
        },
      },
      {
        title: '更新时间',
        width: 180,
        dataIndex: 'updateTime',
        sorter: true,
        scopedSlots: {
          customRender: 'updateTime',
        },
      },
      {
        title: '创建人',
        width: 180,
        dataIndex: 'createByText',
        scopedSlots: {
          filterDropdown: 'selectPeople',
          filterIcon: 'selectIcon',
          customRender: 'createByText',
        },
      },
      {
        title: '更新人',
        width: 180,
        dataIndex: 'updateByText',
        scopedSlots: {
          filterDropdown: 'selectPeople',
          filterIcon: 'selectIcon',
          customRender: 'updateByText',
        },
      },
      // 为了更新人不被删除
      {
        fixed: 'right',
        title: '操作',
        width: 50,
        dataIndex: 'actions',
        ellipsis: true,
        scopedSlots: { customRender: 'actions' },
      },
    ]
    const goodsColumns = [
      {
        title: '序号',
        dataIndex: 'index',
        ellipsis: true,
        customRender: (text, record, index) => `${index + 1}`,
      },
      {
        title: '物品编号',
        dataIndex: 'serialCode',
        ellipsis: true,
        scopedSlots: { customRender: 'serialCode' },
      },
      {
        title: '物品名称',
        dataIndex: 'serialName',
        ellipsis: true,
      },
      {
        title: '规格',
        dataIndex: 'serialSpecifications',
        ellipsis: true,
      },
      {
        title: '单位',
        dataIndex: 'unitName',
        ellipsis: true,
      },
      {
        title: '数量',
        dataIndex: 'serialNumber',
        ellipsis: true,
      },
    ]
    const actionArr = [
      // {
      //   fixed: 'right',
      //   title: '操作',
      //   width: 50,
      //   dataIndex: 'actions',
      //   ellipsis: true,
      //   scopedSlots: { customRender: 'actions' },
      // },
    ]
    return {
      jkeForm: {
        title: '订单详情',
        visible: false,
        fullscreen: true,
        switchFullscreen: true,
      },
      moment,
      subStrText,
      numFormat,
      detailInfo: {},
      activeKey: '1',
      selectedRowKeys: [],
      listIndeterminate: false,
      listCheckAll: false,
      allColumn,
      actionArr,
      columns: allColumn, // 生产工单columns
      orderFilterForm: {}, // 生产工单筛选表单
      sortForm: {},
      goodsColumns: goodsColumns, // 物品明细columns
      collectionList: [],
      shipPage: {
        // 发货记录table分页配置
        loading: false,
        current: 1,
        total: 0,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30', '40', '50'],
        dataSource: [], // 当前页数据
        totleList: [], // 总数据
      },
      orderPage: {
        // 生产订单进度table分页配置
        loading: false,
        current: 1,
        total: 0,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30', '40', '50'],
        dataSource: [], // 当前页数据
        totleList: [], // 总数据
      },
      goodsDetail: {
        // 申请table分页配置
        loading: false,
        current: 1,
        total: 0,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30', '40', '50'],
        dataSource: [], // 当前页数据
        totleList: [], // 总数据
      },
      navHeight: 0,
      headerFixed: false,
      queryId: '',
      colectionIndex: 1.3,
      formTypeExtendedFields: [],
      formType: 3,
    }
  },
  components: {
    crumbs,
    FileDetail,
    FlowStatus,
    Examine,
    ImagePreview,
    applyDeliver: (resolve) => require(['@/views/apply/applyDeliver'], resolve),
    workOrderDetail,
  },
  mounted() {
    this.headerFixed = false
    window.addEventListener('scroll', this.handleScroll, true)
  },
  destroyed() {
    //组件销毁时解除监听
    window.removeEventListener('scroll', this.handleScroll)
  },
  computed: {
    computedX() {
      let xnum = 0
      for (let item of this.columns) {
        xnum += Number(item.width) || 0
      }

      return xnum
    },
  },
  methods: {
    progressFormat(_, a, b) {
      if (b === 0) {
        return 'X'
      }
      return `${Math.floor((a / b) * 100)}%`
    },
    getStatusColor(status) {
      let colorList = {
        0: '#ff943e',
        1: '#1890ff',
        2: '#00b042',
        3: '#888888',
      }
      return colorList[status] || ''
    },
    checkColor(row) {
      let colorStr = ''
      // console.log('当前数据：', row.planEndTime)
      if (row.status == 'notStarted' || row.status == 'inProduction') {
        let currentTime = new Date(+new Date() + 8 * 3600 * 1000).toJSON().substr(0, 19).replace('T', ' ')
        let checkResult = compareDate(row.planEndTime, currentTime)
        if (checkResult) {
          colorStr = ''
        } else {
          colorStr = '#ff4d4f'
        }
      } else {
        colorStr = ''
      }
      return colorStr
    },
    initDetail(v) {
      this.jkeForm.visible = true
      this.queryId = v.id
      this.detailInfo = JSON.parse(JSON.stringify(v))
      this.activeKey = '1'
      this.getDetail()
      // this.getOrderList()
      APILX.formTypeExtendedFieldList({ formType: 2 }).then((res) => {
        if (res.code == 200 && res.result) {
          this.formTypeExtendedFields = res.result
        }
      })
    },
    openDetail(row) {
      this.$refs.workOrderDetail.initDetail(row)
    },
    handleScroll() {
      // let offsetTop = this.$el.querySelector('#fixedHeaderRoot').getBoundingClientRect().top
      // this.headerFixed = offsetTop < 44 ? true : false
    },
    //创建人 筛选
    createChange(storeVals, row) {
      this.orderFilterForm.createBys = ''
      let newArr = []
      for (let item of row) {
        newArr.push(item.id)
      }
      if (newArr.length > 0) {
        this.orderFilterForm.createBys = newArr.join(',')
      }
      this.orderPage.current = 1
      this.getOrderList()
    },
    //更新人 筛选
    updateChange(storeVals, row) {
      this.orderFilterForm.updateBys = ''
      let newArr = []
      for (let item of row) {
        newArr.push(item.id)
      }
      if (newArr.length > 0) {
        this.orderFilterForm.updateBys = newArr.join(',')
      }
      this.orderPage.current = 1
      this.getOrderList()
    },
    /* 分割线 */
    checkStatus(value) {
      if (value == 0) {
        return '#DFDFDF'
      } else if (value >= 100) {
        return '#4bd863'
      } else {
        return '#1890ff'
      }
    },
    // 生产工单列表筛选
    filterOrderData() {
      this.orderPage.dataSource = filterTableData(this.orderorderFilterForm, this.orderPage.dataSource)
    },
    deleteRecord(v) {
      // 删除收款记录
      let that = this
      that.$antdConfirm({
        title: '确定删除吗？',
        content: '删除后不可恢复',
        onOk() {
          API.saleContractPaybackDelete({ id: v.id }).then((res) => {
            if (res.code == 200) {
              that.$antdMessage.success('删除成功！')
              that.getDetail()
            } else {
              that.$error({
                title: `${res.message}`,
                content: '删除失败！',
              })
            }
          })
        },
        onCancel() {},
      })
    },
    /* 本次申请发货-输入限制 */
    inputNum(e, i) {
      let nums = fourFloatNum(this.shipPage.dataSource[i].num)
      this.shipPage.dataSource[i].num = nums
      for (let j = 0; j < this.shipPage.totleList.length; j++) {
        const element = this.shipPage.totleList[j]
        if (element.id == this.shipPage.dataSource[i].id) {
          this.shipPage.totleList[j].num = nums
        }
      }
    },
    blurNum(e, i) {
      let snum = this.shipPage.dataSource[i].num ? Number(this.shipPage.dataSource[i].num) : 0
      let bnum = this.shipPage.dataSource[i].surplusApplyNum ? Number(this.shipPage.dataSource[i].surplusApplyNum) : 0
      let rate = Number(this.shipPage.dataSource[i].conversionRate) || 0
      if (e.target.value == '0') {
        this.shipPage.dataSource[i].num = ''
        for (let j = 0; j < this.shipPage.totleList.length; j++) {
          const element = this.shipPage.totleList[j]
          if (element.id == this.shipPage.dataSource[i].id) {
            this.shipPage.totleList[j].num = ''
          }
        }
        this.$antdMessage.error('本次申请发货数量必须大于0')
      } else if (snum > bnum * rate) {
        this.shipPage.dataSource[i].num = ''
        for (let j = 0; j < this.shipPage.totleList.length; j++) {
          const element = this.shipPage.totleList[j]
          if (element.id == this.shipPage.dataSource[i].id) {
            this.shipPage.totleList[j].num = ''
          }
        }
        this.$antdMessage.error('操作失败，本次申请发货数量不能大于剩余应申请数量')
      }
    },
    /* 批量操作 */
    batchAction() {
      if (this.selectedRowKeys.length == 0) {
        this.$antdMessage.info('请先选择数据')
        return
      }
      let newArr = []
      for (let i = 0; i < this.shipPage.totleList.length; i++) {
        const ship = this.shipPage.totleList[i]
        for (let j = 0; j < this.selectedRowKeys.length; j++) {
          const sele = this.selectedRowKeys[j]
          if (ship.id == sele) {
            newArr.push(ship)
            if (!ship.num) {
              this.$antdMessage.error(`第${i + 1}条本次申请发货必填`)
              return
            }
          }
        }
      }
      let dealGoods = {
        contractName: this.detailInfo.contractName,
        contractId: this.detailInfo.id,
        customerIdText: this.detailInfo.customerIdText,
        customerId: this.detailInfo.customerId,
        promiseDate: this.detailInfo.promiseDate,
        goods: newArr,
      }
      dealGoods = JSON.stringify(dealGoods)
      this.$refs.applyDeliver.initForm({ dealGoods })
      // this.$openWay(this, true, '/apply/applyDeliver', { dealGoods })
    },
    /* 列表选择 */
    onSelectChange(selectedRowKeys, selectedRows) {
      console.log('selectedRowKeys changed: ', selectedRowKeys)
      this.selectedRowKeys = selectedRowKeys
      this.checkBoxStatus()
    },
    // 全选
    onCheckAllChange(e) {
      if (e.target.checked) {
        for (let item of this.shipPage.dataSource) {
          this.selectedRowKeys = this.selectedRowKeys.filter((each) => {
            console.log('each != item.id:', each != item.id)
            return each != item.id
          })
          this.selectedRowKeys.push(item.id)
        }
      } else {
        for (let item of this.shipPage.dataSource) {
          this.selectedRowKeys = this.selectedRowKeys.filter((each) => {
            console.log('each != item.id:', each != item.id)
            return each != item.id
          })
        }
      }
      this.checkBoxStatus()
    },
    /* 清除 */
    clearArr() {
      this.selectedRowKeys = []
      this.checkBoxStatus()
    },
    // 发货记录分页
    onChangePage(current, pageSize) {
      this.handleChangePage(current, pageSize, 'shipPage')
    },
    // 生产订单进度分页
    onChangeOrderPage(current, pageSize) {
      this.orderPage.current = current
      this.orderPage.pageSize = pageSize
      this.getOrderList()
    },
    // 申请分页
    onChangegoodsDetail(current, pageSize) {
      this.handleChangePage(current, pageSize, 'goodsDetail')
    },
    // 分页公用方法
    handleChangePage(current, pageSize, key) {
      this[key].current = current
      this[key].pageSize = pageSize
      let cur = 0
      let siz = pageSize * current
      if (current == 1) {
        cur = 0
      } else {
        cur = (current - 1) * pageSize
      }
      // console.log(this[key].handleList, 'this.shipPage.shipPage', cur, siz)
      this[key].loading = true
      setTimeout(() => {
        this[key].dataSource = this[key].totleList.slice(cur, siz)
        console.log(cur, siz)
        this[key].loading = false
      }, 300)
    },
    checkBoxStatus() {
      if (this.selectedRowKeys.length == 0) {
        this.listIndeterminate = false
        this.listCheckAll = false
      } else {
        let tableIds = []
        for (let item of this.shipPage.dataSource) {
          tableIds.push(item.id)
        }
        let checkValue = this.isInclude(tableIds, this.selectedRowKeys)
        if (checkValue) {
          this.listIndeterminate = false
          this.listCheckAll = true
        } else {
          this.listIndeterminate = true
          this.listCheckAll = false
        }
      }
    },
    isInclude(aa, bb) {
      return aa.every((item) => {
        return bb.some((sub) => {
          return sub === item
        })
      })
    },
    /* 切tab */
    callback(i) {
      this.activeKey = i
      if (i == 1) {
        this.getDetail()
      } else if (i == 3) {
        this.getOrderList()
      } else if (i == 2) {
        this.colectionIndex += 1
      }
    },
    getOrderList() {
      let obj = {
        ...this.orderFilterForm,
        ...this.sortForm,
        saleOrderId: this.queryId,
        pageNo: this.orderPage.current,
        pageSize: this.orderPage.pageSize,
      }
      this.orderPage.loading = true
      API.getProduceOrderInfo(obj).then((res) => {
        if (res.result) {
          this.orderPage.total = res.result.total || 0
          this.orderPage.dataSource = res.result.records
        }
        this.orderPage.loading = false
      })
    },
    // 排序
    handleChange(pagination, filters, sorter, { currentDataSource }) {
      if (sorter.order) {
        let sortType = ''
        if (sorter.order == 'ascend') {
          sortType = 'ASC'
        } else {
          sortType = 'DESC'
        }
        this.sortForm = {
          sortType: sortType,
          sortColumn: camelCase2UnderLine(sorter.columnKey),
        }
        this.orderPage.current = 1
        this.getOrderList()
      } else {
        this.sortForm = {
          sortType: '',
          sortColumn: '',
        }
        this.orderPage.current = 1
        this.getOrderList()
      }
    },
    /* 面包屑返回 */
    goBack() {
      this.jkeForm.visible = false
    },
    getDetail() {
      let id = this.queryId
      this.goodsDetail.loading = true
      // 获取物品明细
      API.getSaleOrderDetail({ orderId: id }).then((res) => {
        if (res.code == 200) {
          this.goodsDetail.dataSource = res.result.records //别的地方取30条，不知道为什么，这里先取全部
          this.goodsDetail.totleList = res.result.records
          this.goodsDetail.loading = false
        }
      })
      // API.getProduceOrderInfo({
      //   saleOrderSid: id,
      //   pageNo: this.orderPage.current,
      //   pageSize: this.orderPage.pageSize,
      // }).then((res) => {
      //     if (res.code == 200) {
      //     this.orderPage.dataSource = res.result.records //别的地方取30条，不知道为什么，这里先取全部
      //     this.orderPage.totleList = res.result.records
      //     this.orderPage.loading = false
      //   }
      // })
      // this.getPayBack()
    },
    getPayBack() {
      let id = this.queryId
      API.pageQueryPaybackByContractId({ contractId: id, pageSize: 999, pageNo: 1 }).then((res) => {
        this.collectionList = res.result.records
      })
    },
  },
}
</script>
<style scoped lang="less">
@import '~@/assets/less/public.less';
.fixed-tab {
  /deep/.ant-tabs-top {
    position: fixed;
    top: 40px; //自己根据需求设定
    z-index: 999;
    left: 0;
    width: 100% !important;
    .ant-tabs-bar {
      padding-left: 14px;
      background: #fff;
    }
  }
}
.flex(@jc,@ai,@fd:row) {
  display: flex;
  justify-content: @jc;
  align-items: @ai;
  flex-direction: @fd;
}
.searchWorkOreder {
  .flex(flex-start, center);
  padding: 8px;
}
.item-wrap {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.detail-item:nth-of-type(n + 4) {
  margin-top: 40px;
}

.detail-item {
  width: 30%;
}

.uni-card {
  padding: 24px 40px;
  background: #fff;
}

.bd-line {
  height: 1px;
  background: @greyBorder;
  margin: -12px -40px 24px -40px;
}

.cards-box {
  overflow-y: scroll;
  overflow-x: hidden;
  padding: 12px 0;
  margin: 0 -12px 0;
  flex: 1;
  background: #fff;
  margin-bottom: 12px;
  // height: calc(100vh - 100px);
}

.tab-wrap {
  height: calc(100vh - 285px);
  background: #fff;
}

.table-wrap {
  // height: calc(100vh - 300px);
  background: #fff;
  padding: 24px;
  // margin: 0 12px;
}

.tab-nav {
  height: 110px;
  padding: 32px 24px;
  margin-bottom: 12px;
  background: #fff;
  display: flex;
  justify-content: space-between;

  .tab-nav-item {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: center;
    width: 33%;
  }

  .bd-line {
    height: 100%;
    width: 1px;
    background: #eeeeee;
    margin: 0 40px;
  }
}

.col-table {
  height: calc(100% - 120px);
  background: #fff;
  padding: 24px;
}

.status-box {
  width: 100%;
  height: 42px;
  position: relative;

  img {
    width: 86px;
    height: 86px;
    margin-top: -44px;
  }
}
/deep/.ant-modal-body {
  height: calc(100vh - 55px) !important;
  .page-scroll-wrap[data-v-75d2a994] {
    height: calc(100vh - 55px);
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
  }
}
</style>
